<template>
  <div class="main">
    <div class="app_userBox">
      <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end">
        <template #reference>
          <div class="meBox">
            <van-icon name="manager-o" class="me-icon" />
          </div>
        </template>
      </van-popover>
    </div>
    <!-- <NavBar></NavBar> -->
    <TabBar></TabBar>
    <!-- <Notice> </Notice> -->
    <Tabs> </Tabs>
    <div class="page-content">
      <router-view v-slot="{ Component }">
        <transition :name="state.transitionName">
          <component :is="Component" class="router-view" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import TabBar from "@/components/TabBar.vue"
import { reactive, ref, computed, onMounted, watch } from "vue";
import { useRouter, RouterView } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import Tabs from "@/components/Tabs.vue";
import Notice from "@/components/notice.vue";
import { useStore } from "@/stores/user";

const router = useRouter();
const store = useStore();

const showPopover = ref(false);
const actions = ref([{ text: "首页" }, { text: "退出" }]);


const state = reactive({
  transitionName: "slide-left",
  headerScroll: false,
});
const onSelect = (action) => {
  var text = action.text;
  switch (text) {
    case "个人信息":
      break;
    case "首页":
      router.push({
        path: "/",
      });
      break;
    case "退出":
      // 清除用户信息
      store.logout().then(() => {
        router.push({
          path: "/login",
        });
      });
      break;
    default:
      break;
  }
};

router.beforeEach((to, from) => {
  if (to.meta.index > from.meta.index) {
    state.transitionName = "slide-left"; // 向左滑动
  } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    state.transitionName = "slide-right";
  } else {
    state.transitionName = ""; // 同级无过渡效果
  }
});
</script>

<style lang="less" scoped>
// @import "../common/style/mixin";
.main {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

.page-content {
  width: 100%;
  // height: 100%;
}

.app_userBox {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;

  .meBox {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    // background-color: #fff;
    color: #fff;
    background: rgba(49, 174, 254, 0.8);
    padding-left: 15px;
    padding-top: 5px;
    border-radius: 0px 0px 0px 30px;
    box-shadow: 0px 0px 10px 10px rgba(223, 226, 230, 0.5);

    .me-icon {
      font-size: 40px;
    }
  }
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
  /* 这里保持动画过程中的阴影 */
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
  will-change: transform;
  transition: all 0.4s ease-out;
  /* 这里为了解决入栈出栈时的白屏现象 */
  position: absolute;
}

.slide-right-enter-from {
  /* 这里设置0，为了避免一开始页面内容一闪而过的情况 */
  opacity: 0;
  transform: translateX(-50%);
}

.slide-right-leave-to {
  z-index: 100;
  /* 这里为了优化阴影溢出屏幕，不至于突然消失 */
  transform: translateX(102%);
}

.slide-right-leave-from {
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}

.slide-left-enter-from {
  z-index: 100;
  transform: translateX(100%);
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}

.slide-left-leave-to {
  opacity: 0.4;
  transform: translateX(-50%);
}
</style>
